<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Work3</title>
    <style type="text/css">
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .con{
            width: 301px;
            height: 303px;
            position: relative
        }
        .con li{
            width: 301px;
            height: 60px;
            color: #5c5858;
            font: normal 16px/60px "Microsoft Yahei";
            border-bottom: 1px dashed #323232;
        }
        .con li .list1{
            width: 42px;
            height: 42px;
            background: url("../images/007bg02.png");
            display: inline-block;
            position: absolute;
            top: 11px; 
        }
        .con li .list2{
            width: 42px;
            height: 42px;
            background: url("../images/007bg02.png") -44px 0px;
            display: inline-block;
            position: absolute;
            top: 71px; 
        }
        .con li .list3{
            width: 42px;
            height: 42px;
            background: url("../images/007bg02.png") -88px 0px;
            display: inline-block;
            position: absolute;
            top: 131px; 
        }
        .con li .list4{
            width: 42px;
            height: 42px;
            background: url("../images/007bg02.png") -132px 0px;
            display: inline-block;
            position: absolute;
            top: 191px; 
        }
        .con li .list5{
            width: 42px;
            height: 42px;
            background: url("../images/007bg02.png") -176px 0px;
            display: inline-block;
            position: absolute;
            top: 251px; 
        }
        .con li .head1{
            text-indent: 51px;
            display: inline-block;
        }
        .con li .head2{
            text-indent: 51px;
            display: inline-block;
        }
        .con li .head3{
            text-indent: 51px;
            display: inline-block;
        }
        .con li .head4{
            text-indent: 51px;
            display: inline-block;
        }
        .con li .head5{
            text-indent: 51px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="con">
        <ul>
            <li><span class="list1"></span><span class="head1">美人鱼</span></li>
            <li><span class="list2"></span><span class="head2">疯狂动物园</span></li>
            <li><span class="list3"></span><span class="head3">魔兽</span></li>
            <li><span class="list4"></span><span class="head4">美国队长3：英雄内战</span></li>
            <li><span class="list5"></span><span class="head5">湄公河行动</span></li>
        </ul>
    </div>
</body>
</html>